<template>
  <el-table
    class="category-list"
    border
    lazy
    :data="categorys"
    :load="load"
    style="width:90%;"
    :row-key="getRowKey"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    :row-class-name="tableRowClassName"
  >
    <el-table-column
      prop="id"
      label="分类ID"
      align="center"
      width="150"
    />

    <el-table-column
      prop="name"
      label="分类名称"
    />

    <el-table-column label="操作" width="250" align="center">
      <template slot="header">
        <el-input placeholder="按Enter键添加一级分类"/>
      </template>

      <template slot-scope="scope">
        <HintButton title="添加子分类" :disabled="!scope.row.level" 
          size="mini" type="primary" icon="el-icon-plus"/>
        <HintButton title="修改分类" 
          size="mini" type="primary" icon="el-icon-edit"/>
        <HintButton title="删除分类" 
          size="mini" type="danger" icon="el-icon-delete"/>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'CategoryList',

  data() {
    return {
      categorys: [], //用于存储所有分类列表的数组
    };
  },

  mounted () {
    this.getCategorys1()
  },

  methods: {
    /* 
    获取一级分类列表显示
    */
    getCategorys1 () {
      this.$API.category.getCategory1List().then(result => {
        const categorys = result.data
        categorys.forEach(c => {
          c.hasChildren = true  // 默认标识有子代表
          c.level = 1 // 标识当前分类级别为1级
        })
        this.categorys = categorys
      })
    },
    
    /* 
    异步加载下一级分类列表显示
    */
    async load (row, treeNode, resolve) {
      // console.log('---', row, treeNode)
      if (row.level===1) {
        const categorys2 = await this.getCategorys2(row)
        resolve(categorys2)
      } else if (row.level===2) {
        const categorys3 = await this.getCategorys3(row)
        resolve(categorys3) // row.children = categorys3
      }
    },

    /* 
    获取二级分类列表, 返回包含数据的promise对象
    */
    async getCategorys2 (row) {
      const result = await this.$API.category.getCategory2List(row.id)
      let categorys2 = result.data
      
      if (categorys2 && categorys2.length>0) {
        categorys2.forEach(item => {
          // 默认标识有三级子分类
          item.hasChildren = true
          // 分类级别为2级
          item.level = 2
        })
      } else {
        // 标识没有二级子分类
        row.hasChildren = false
        // 指定为空数组
        categorys2 = []
      }
      
      // 返回二级分类列表
      return categorys2
    },

    /* 
    获取三级分类列表, 返回包含数据的promise对象
    */
    async getCategorys3 (row) {

      const result = await this.$API.category.getCategory3List(row.id)
      const categorys3 = result.data
      if (categorys3 && categorys3.length>0) {
        return categorys3
      } else {
        // 标识没有三级子分类
        row.hasChildren = false
        // 返回一个空数组
        return []
      }
    },

    /* 
    动态确定当前行的唯一key
    */
    getRowKey (row) {
      return row.level + '-' + row.id
    },

    /* 
    返回二级分类列表的类名
    */
    tableRowClassName({row, rowIndex}) {
      if (row.level === 2) {
        return 'level2-row'
      } 
    },
  }
}
</script>
<style lang="scss">
  .category-list {
    .level2-row {
      background: #f0f9eb;
    }
  }
</style>